<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header {
            background: #0044cc;
            color: #fff;
            padding: 1rem;
            text-align: center;
        }
        nav {
            background: #0033a0;
            color: #fff;
            padding: 0.5rem;
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            background: #002a80;
            cursor: pointer;
        }
        nav a.active {
            background: #001a5d;
        }
        .container {
            padding: 2rem;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        footer {
            background: #0033a0;
            color: #fff;
            text-align: center;
            padding: 1rem;
            position: relative;
            bottom: 0;
            width: 100%;
        }
        .editable {
            border: 1px dashed #aaa;
            padding: 0.5rem;
        }
        .editable[contenteditable="true"] {
            border: 1px dashed #007bff;
        }
    </style>
</head>
<body>
    <header>
        <h1 class="editable" id="headerTitle">Welcome to Our Formal Website</h1>
    </header>
    <nav>
        <a href="#" class="tab-link" data-tab="home">Home</a>
        <a href="#" class="tab-link" data-tab="about">About Us</a>
        <a href="#" class="tab-link" data-tab="services">Services</a>
        <a href="#" class="tab-link" data-tab="blog">Blog</a>
        <a href="#" class="tab-link" data-tab="contact">Contact</a>
    </nav>
    <div class="container">
        <div id="home" class="tab-content">
            <h2 class="editable" id="homeTitle">Home</h2>
            <p class="editable" id="homeContent">Welcome to our formal website...</p>
        </div>
        <div id="about" class="tab-content">
            <h2 class="editable" id="aboutTitle">About Us</h2>
            <p class="editable" id="aboutContent">Learn more about our company...</p>
        </div>
        <div id="services" class="tab-content">
            <h2 class="editable" id="servicesTitle">Services</h2>
            <p class="editable" id="servicesContent">Explore the various services we offer...</p>
        </div>
        <div id="blog" class="tab-content">
            <h2 class="editable" id="blogTitle">Blog</h2>
            <p class="editable" id="blogContent">Read our latest blog posts...</p>
        </div>
        <div id="contact" class="tab-content">
            <h2 class="editable" id="contactTitle">Contact Us</h2>
            <p class="editable" id="contactContent">Get in touch with us...</p>
        </div>
    </div>
    <footer>
        <p class="editable" id="footerText">© 2024 Formal Website. All rights reserved.</p>
    </footer>

    <script>
        function loadContent() {
            google.script.run.withSuccessHandler(function(data) {
                for (const key in data) {
                    if (data.hasOwnProperty(key)) {
                        const element = document.getElementById(key);
                        if (element) {
                            element.innerText = data[key];
                        }
                    }
                }
            }).getContent();
        }

        function saveContent() {
            const content = {};
            document.querySelectorAll('.editable').forEach(el => {
                content[el.id] = el.innerText;
            });

            google.script.run.withSuccessHandler(function(response) {
                alert(response);
            }).doPost({ postData: { contents: JSON.stringify(content) } });
        }

        document.addEventListener('DOMContentLoaded', () => {
            const tabLinks = document.querySelectorAll('.tab-link');
            const tabContents = document.querySelectorAll('.tab-content');

            function showTabContent(tabId) {
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    if (content.id === tabId) {
                        content.classList.add('active');
                    }
                });

                tabLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('data-tab') === tabId) {
                        link.classList.add('active');
                    }
                });
            }

            tabLinks.forEach(link => {
                link.addEventListener('click', (event) => {
                    event.preventDefault();
                    const tabId = link.getAttribute('data-tab');
                    showTabContent(tabId);
                });
            });

            if (tabLinks.length > 0) {
                tabLinks[0].click();
            }

            document.addEventListener('keydown', (event) => {
                if (event.ctrlKey && event.key === 'e') {
                    document.querySelectorAll('.editable').forEach(element => {
                        element.contentEditable = element.contentEditable === 'true' ? 'false' : 'true';
                        element.style.border = element.contentEditable === 'true' ? '1px dashed #007bff' : 'none';
                    });
                }
            });

            document.getElementById('saveButton').addEventListener('click', () => {
                saveContent();
            });

            loadContent();
        });
    </script>
    <button id="saveButton">Save Changes</button>
</body>
</html>
